<%@ page contentType = "text/html;charset=utf-8" %>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Henz Mobile</title>
<link rel="stylesheet" type="text/css" href="/css/index.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCf04StYwBrxVhqbjpUgKTdWNhs0tpDE1w"></script>
<style>
table.mainTable{
	width:100%;
	height:100%;
	border:solid 0px #CC3299;
}
table.mainTable tr td{
	vertical-align:top;
	padding:2px;
}

table.mainTable tr td.listCol{
	width;300px;
}

table.mainTable tr td.dataCol{
	width: -moz-calc(100% - 300px);
	width: -webkit-calc(100% - 300px);
	width: calc(100% - 300px);
}

table.dataList{
	width:100%;
	border-collapse: collapse;
	border:solid 0px;
	padding:2px;
}

table.dataList tr th{
	background-color:#000000;
	color:rgb(187,187,187);
	border-bottom:solid 1px white;
}

table.dataList tr td{
	color:rgb(89,89,89);
}

table.dataList tr.oddRow{
	background-color:rgb(201,201,201);
}

table.dataList tr.evenRow{
	background-color:rgb(229,229,229);
}

div.mapDiv{
	width:100%;
	height:350px;
	border:solid 0px;
}

div.titleArea{
	width:100%;
	height:25px;
	color:rgb(91,91,91);
	font-size: 1.3em;
	border:solid 3px rgb(230,230,230);
	text-align:left;
	vertical-align:middle;
  background: -webkit-linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgb(251,251,251), rgb(240,240,240)); /* Standard syntax */
}

div.dataArea{
	width:100%;
	height:calc(100% - 40px);
	border:solid 3px rgb(230,230,230);
}

div.detailDiv{
	width:100%;
	height:calc(100% - 350px);
	border:solid 0px;
}

div.mapArea{
	width:100%;
	height:100%;
}

</style>
<script>
$(document).ready(init);

function init(){
	var mapOptions = {
		  center:{}
		, zoom: 7
	};
	var map = new google.maps.Map(
		document.getElementById('report_map_area')
		, mapOptions
	);
	
	var browserSupportFlag = false;
	// Try W3C Geolocation (Preferred)
	if(navigator.geolocation) {
		browserSupportFlag = true;
		navigator.geolocation.getCurrentPosition(function(position) {
			initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
			map.setCenter(initialLocation);
		}, function() {
			handleNoGeolocation(browserSupportFlag);
		});
	}
	// Browser doesn't support Geolocation
	else {
		browserSupportFlag = false;
		handleNoGeolocation(browserSupportFlag);
	}

	  function handleNoGeolocation(errorFlag) {
	    if (errorFlag == true) {
	      alert("Geolocation service failed.");
	      initialLocation = newyork;
	    } else {
	      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
	      initialLocation = siberia;
	    }
	    map.setCenter(initialLocation);
	  }
	
}
</script>
</head>
<body>
<table class="mainTable">
	<tbody>
	<tr>
		<td class='listCol'>
			<div class='titleArea'>
				Incoming Alert222
			</div>
			<div class='dataArea'>
				<table class="dataList">
					<tr>
						<th>Type</th>
						<th>Time</th>
						<th>Date</th>
						<th>Location</th>
						<th>City</th>
						<th>Name</th>
					</tr>
					
					<tr class='oddRow'>
						<td>SOS</td>
						<td>03:42</td>
						<td>9/5/14</td>
						<td>1301 E. Lookout Dr</td>
						<td>Allen</td>
						<td>Todd G.</td>
					</tr>
					
					<tr class='evenRow'>
						<td>CALL</td>
						<td>09:42</td>
						<td>9/5/14</td>
						<td>1062 Big Spring Dr.</td>
						<td>Plano</td>
						<td>Guy W.</td>
					</tr>
					
					<tr class='oddRow'>
						<td>SOS</td>
						<td>03:42</td>
						<td>9/5/14</td>
						<td>1301 E. Lookout Dr</td>
						<td>Allen</td>
						<td>Todd G.</td>
					</tr>
					
					<tr class='evenRow'>
						<td>CALL</td>
						<td>09:42</td>
						<td>9/5/14</td>
						<td>1062 Big Spring Dr.</td>
						<td>Plano</td>
						<td>Guy W.</td>
					</tr>
					
				</table>
			</div>
		</td>
		<td class='dataCol'>
			<div class='mapDiv'>
				<div class='titleArea'>
					Alert Location
				</div>
				<div id='report_map_area' class='dataArea'>
						map area
				</div>
			</div>
			<div class='detailDiv'>
				<div class='titleArea'>
					Detail Information
				</div>
				<div class='dataArea'>
					detail data
				</div>
			</div>
		</td>
	</tr>
	</tbody>
</table>
</body>
</html>

